<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<script src="js/flexible.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery-3.1.1.min.js" type="text/javascript"></script>
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			li{
				list-style: none;
			}
			a{
				text-decoration: none;
			}
			.box{
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
			}
			.nav{
				width: 100%;
				height: 1.8rem;
				display: flex;
				position: fixed;
				align-items: center;
				top: 0;
				background: url(img/nav.png);
				background-repeat: no-repeat;
				background-size: 100% 100%;
			}
			.nav img{
				position: absolute;
				height: 1rem;
				width: 0.6rem;
				margin-left: 1rem;
			}
			.nav p{
				width: 100%;
				height: 100%;
				text-align: center;
				font-size: 0.6rem;
				line-height: 1.8rem;
				color: white;
			}
			.pj_box{
				margin-top: 1.8rem;
				height: 3rem;
				width: 8.8rem;
				border-bottom: 1px solid #E5E5E5;
				display: flex;
				flex-wrap: wrap;
				align-items: center;
			}
			.pj_box_{
				height: 3rem;
				width: 8.8rem;
				border-bottom: 1px solid #E5E5E5;
				display: flex;
				flex-wrap: wrap;
				align-items: center;
			}
			.pj_box_>button{
				width: 2.6rem;
				height: 1rem;
				border-radius: 0.5rem;
				border: 1px solid gray;
				background: transparent;
				cursor: pointer;
				margin-right: 0.3rem;
				margin-bottom: 0.1rem;
			}
			.pj_box>button{
				width: 2.6rem;
				height: 1rem;
				border-radius: 0.5rem;
				border: 1px solid gray;
				background: transparent;
				cursor: pointer;
				margin-right: 0.3rem;
				margin-bottom: 0.1rem;
			}
			
			.dl{
				width: 6rem;
				height: 1.5rem;
				border-radius:0.2rem ;
				background: #ff3333;
				color: white;
				margin-top: 1rem;
			}
			.pj{
				width: 100%;
				height: auto;
				margin: 0.35rem auto;
				display: flex;
				justify-content: center;
			}
			ul{
				width: 100%;
				height: auto;
				margin-top: 1.8rem!important;
				display: flex;
				justify-content: center;
				flex-wrap: wrap;
			}
			ul>li{
				width: 8.8rem;
				height: 1.8rem;
				border-bottom: 1px solid #e5e5e5;
				line-height: 1.8rem;
				margin-bottom: 0.3rem;
			}
			li>span{
				display: inline-block;
				width: 2rem;
				font-size: 0.4rem;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="nav">
				<img src="img/fanhui@2x.png" >
				<p>
					评价
				</p>
			</div>
			<div class="pj">
				<div class="pj_box">
					<button type="button">差评</button>
					<button type="button">中评</button>
					<button type="button">好评</button>
				</div>
			</div>
				<div class="pj">
					<li><span>手机号</span><img src="img/pingjiaxing@2x.png" ></li>				 
				</div>
				<div class="pj">
					<li><span>验证码</span><img src="img/pingjiaxing@2x.png" ></li>				 
				</div>
				<div class="pj">
					<li><span>密码</span><img src="img/pingjiaxing@2x.png" ></li>			 
				</div>
			
			<div class="pj">
				<div class="pj_box_">
					<button type="button">技术不错</button>
					<button type="button">技术不错</button>
					<button type="button">技术不错</button>
					<button type="button">技术不错</button>
					<button type="button">技术不错</button>
				</div>
			</div>
			<div class="pj">
				<textarea rows="6" cols="55" placeholder="11111">
					说点什么吧
				</textarea>
			</div>
			<div class="pj">
				<button class="dl">
					登录
				</button>
			</div>
			<script type="text/javascript">
				$(function(){
					var $btn=$(".pj_box button")
					for(i=0;i<$btn.length;i++){
						$btn.eq(i).click(function(){
							for(i=0;i<$btn.length;i++){
								$btn.eq(i).css("border","1px solid gray")
							}
							$(this).css("border","1px solid red")
						})
					}
				})
				$(function(){
					var $btn1=$(".pj_box_ button")
					for(i=0;i<$btn1.length;i++){
						$btn1.eq(i).click(function(){
							$(this).css("border","1px solid red")
						})
					}
				})
				
				
				
				
				
			</script>
		</div>
	</body>
</html>
